<template>
	<view>
		<view>
			<view class="uni-padding-wrap uni-common-mt">
				<uni-segmented-control :current="current" :values="items" style-type="text" active-color="#007aff"
					@clickItem="onClickItem" />
			</view>
		</view>
		<view class="content">
			<view v-if="current==0">
				<uni-list :data="clientArr">
					<uni-list-item title="客户编号" :rightText="clientArr.id" />
					<uni-list-item title="订单编号" :rightText="clientArr.orderNumber" />
					<uni-list-item title="客户状态" :rightText="clientArr.clientStatus" />
					<uni-list-item title="客户类型" :rightText="clientArr.clientType" />
					<uni-list-item title="客户名字" :rightText="clientArr.clientName" />
					<uni-list-item title="客户性别" :rightText="clientArr.gender" />
					<uni-list-item title="联系电话" :rightText="clientArr.phone" />
					<uni-list-item title="身份证号" :rightText="clientArr.numberId" />
					<uni-list-item title="楼盘名称" :rightText="clientArr.housesName" />
					<uni-list-item title="楼盘地址" :rightText="clientArr.addr" />
					<uni-list-item title="户型" :rightText="clientArr.houseType" />
					<uni-list-item title="面积" :rightText="clientArr.acreage" />

				</uni-list>
			</view>

			<view v-if="current==1">
				<uni-card>
					<uni-list>
						<uni-list-item title="客户来源" :rightText="clientArr.clientSource" />
						<uni-list-item title="设计师" rightText="右侧文字" />
						<uni-list-item title="日期" :rightText="clientFollwoArr.appointmentReturnTime" />
					</uni-list>
				</uni-card>
				<uni-card>
					<uni-section title="当前状态" type="line">
						<uni-list>
							<uni-list-item title="跟单人" :rightText="clientFollwoArr.followUpName" />
							<uni-list-item title="客情描述" :rightText="clientFollwoArr.clientDescribe" />
							<uni-section title="附件" type="line">
								<view class="example-body">
									<image src="/static/c5.png" mode="center"></image>
								</view>
							</uni-section>
						</uni-list>
					</uni-section>
				</uni-card>
			</view>
			<view v-if="current==2">
				<uni-list>
					<uni-list-item title="是否可量房" :rightText="clientFollwoArr.ifQuantityHouse" />
					<uni-list-item title="预约量房时间" :rightText="clientFollwoArr.appointmentTime" />
					<uni-list-item title="实际量房时间" :rightText="clientFollwoArr.physicalTime" />
					<uni-list-item title="量房人姓名" :rightText="clientFollwoArr.followUpName" />
					<uni-list-item title="量房描述" :rightText="clientFollwoArr.remark" />
				</uni-list>
			</view>
		</view>
	</view>

</template>

<script setup>
	import {
		onMounted,
		ref
	} from 'vue';

	const current = ref(0);

	const items = ref(['基本信息', '客情跟踪', '量房信息']);
	const onClickItem = (e) => {
		if (current.value !== e.currentIndex) {
			current.value = e.currentIndex
		}
	}

	//客户详情列表数据	
	const clientArr = ref({
		acreage: '',
		addr: '',
		age: '',
		clientName: '',
		clientStatus: '',
		clientType: '',
		createTime: '',
		gender: '',
		houseType: '',
		housesName: '',
		id: '',
		numberId: '',
		phone: '',
		clientSource: '',
		orderNumber: ''
	});

	//客户跟进数组

	const clientFollwoArr = ref({
		id: '',
		clientId: '',
		departmentId: '',
		provinceName: '',
		cityName: '',
		districtName: '',
		ifQuantityHouse: '',
		appointmentTime: '',
		physicalTime: '',
		quantityHouseName: '',
		quantityHouseStatus: '',
		remark: '',
		followUpName: '',
		clientDescribe: '',
		imgUrl: '',
		followUpData: '',
		appointmentReturnTime: ''
	})

	onMounted(() => {
		clientList();
		clientFollwoList();
	})


	//定义客户列表的方法
	const clientFollwoList = () => {
		uni.request({
			url: BASE_URL + '/api/client/follow',
			data: clientFollwoArr.value,
			success: (res) => {
				if (res.data.code == 2000) {
					clientFollwoArr.value = res.data.data[0];
					console.log(clientFollwoArr.value)
				} else {
					uni.showToast({
						title: res.data.msg,
						icon: 'error'
					});
				}
			}
		});
	}


	//定义客户列表的方法
	const clientList = () => {
		uni.request({
			url: BASE_URL + '/api/client/select',
			data: clientArr.value,
			success: (res) => {
				if (res.data.code == 2000) {
					clientArr.value = res.data.data[0];
					//console.log(clientArr.value)
				} else {
					uni.showToast({
						title: res.data.msg,
						icon: 'error'
					});
				}
			}
		});
	}
</script>





<style>
	page {
		background-color: #fff;
		overflow: hidden;
	}

	.content {
		background-color: #fff;
	}
</style>